:root {
  --font-family-main: 'Gill Sans', 'Times New Roman', serif;

  // S
  --font-size-s: 12px;
  --font-line-s: 20px;
  --font-s: var(--font-size-s) / var(--font-line-s) var(--font-family-main);

  // M
  --font-size-m: 16px;
  --font-line-m: 24px;
  --font-m: var(--font-size-m) / var(--font-line-m) var(--font-family-main);

  // L
  --font-size-l: 24px;
  --font-line-l: 32px;
  --font-l: var(--font-size-l) / var(--font-line-l) var(--font-family-main);

  // XL
  --font-size-xl: 32px;
  --font-line-xl: 40px;
  --font-xl: var(--font-size-xl) / var(--font-line-xl) var(--font-family-main);
  --navbar-height: 50px;
  --sidebar-width: 300px;
  --sidebar-width-collapsed: 80px;
  --modal-z-index: 1000;
  --overlay-z-index: 100;
  --overlay-color: rgba(0 0 0 / 60%);
  --red-light: #f00;
  --red-dark: #ce0505;

  // redesigned

  --font-family-text-redesigned: 'Nunito Sans', 'Times New Roman', serif;
  --font-family-header-redesigned: 'Roboto', 'Times New Roman', serif;

  // S
  --font-s-redesigned: var(--font-size-s) / var(--font-line-s)
    var(--font-family-text-redesigned);

  // M
  --font-m-redesigned: var(--font-size-m) / var(--font-line-m)
    var(--font-family-text-redesigned);

  // L
  --font-l-redesigned: var(--font-size-l) / var(--font-line-l)
    var(--font-family-header-redesigned);

  // XL
  --font-xl-redesigned: var(--font-size-xl) / var(--font-line-xl)
    var(--font-family-header-redesigned);
}
